<template>
	<view>
		<view class="head">
			<!-- <image class="img" src="../../static/images/del/banner-img2.png" > -->
		</view>
		<view class="title">   
			{{option.name}}
		</view>
		<view class="" style="margin: 3px 0;">
			
		</view>
		<!-- 列表 -->
		<view class="lists">

			<view class="list" v-for="(item,index) in proddata.records" :key="index"
				@click="router('/Shop/detail/detail',item.prodId)">
				<view class="image">
					<image class="img" :src="item.pic">
				</view>
				<view class="msg">
					<view class="tit">
						 {{item.prodName}}
					</view>
					<view class="text">
						<view class="money">
							<image class="jifen" src="" mode=""></image>
							<view class="jf">
								{{item.price}}
								<text class="txt">
									<!-- <image class="jifen" src="../../static/images/jifen2.png" mode=""></image> -->
									{{item.oriPrice}}
								</text>
								<text style="font-size: 36rpx;margin-left: -20rpx;">
									￥
								</text>
							</view>
						</view>
						<view class="look">
							查看详情
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="foot" v-show="bool">
			到底了~
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: '',
				proddata: {},
				bool:false
			}
		},
		methods: {
			router(url, data) {
				this.$u.route({
					url: url,
					params: {
						id: data
					}
				})
			},
		},
		onLoad(option) {
			console.log(option)
			this.option = option
			this.$u.get("/prod/prodListByTagId?tagId=" + option.id).then(res => {
				console.log(res.data.records)
				this.proddata = res.data
				console.log(this.proddata);
			})
			uni.setNavigationBarTitle({
				title: this.option.name
			});
			// this.$u.get("/prod/pageProd?categoryId="+option.id+"&current=1&size=10").then(res=>{
			// 	console.log(res);
			// })
		},
		onReachBottom() {
			console.log(this.proddata);
			var list = this.proddata.records
			if (this.proddata.records.length < this.proddata.total) {
				this.$u.get("/prod/prodListByTagId?tagId=" + this.option.id + "&current=" + (++this.proddata.current) +
					"&size=10").then(res => {
					this.proddata.records = list.concat(res.records)
				})
			}else{
				this.bool=true
			}
		}
	}
</script>

<style>
.foot{
		text-align: center;
		line-height: 50px;
		color: #A3A3A3;
		font-size: 12px;
	}
	.head .img {
		width: 100%;
		height: 200px;
	}

	.title {
		margin: 30px 0;
		color: rgba(64, 64, 64, 100);
		font-size: 20px;
		text-align: center;
		font-weight: 600;
	}

	.lists {
		width: 95%;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
	}

	.lists .list {
		width: 47%;
		margin: 0 10rpx;
	}

	.lists .list .image {
		width: 100%;
	}

	.lists .list .image .img {
		width: 100%;
		height: 203px;
		border-radius: 10px;
	}

	.lists .list .msg {}

	.lists .list .msg .tit {
		color: rgba(16, 16, 16, 100);
		height: 40px;
		font-size: 16px;
		text-align: left;
		margin-top: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.lists .list .msg .text {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		margin-bottom: 30px;

	}

	.lists .list .msg .money {
		display: flex;
	}

	.lists .list .msg .money .txt {
		font-size: 13px;
		text-decoration: line-through;
		color: #999;
		margin-left: 10px;
	}

	.lists .list .msg .money .jf {
		font-size: 20px;
		color: #FF8C00;
	}

	.lists .list .msg .text .look {
		width: 76px;
		height: 28px;
		line-height: 28px;
		border-radius: 202px;
		background-color: rgba(255, 140, 0, 100);
		color: rgba(255, 255, 255, 100);
		font-size: 12px;
		text-align: center;
		font-family: Arial;
		border: 1px solid rgba(255, 255, 255, 100);
	}

	.lists .list .msg .jifen {
		margin-top: 6px;
		width: 20px;
		height: 15px;
		margin-right: 1px;
	}

	.lists .list .msg .jifen1 {
		margin: auto 0;
		width: 10px;
		height: 5px;
	}
</style>
